// 企业用户
<template>
  <div class="qiyeyonghu">
    
    <el-form
      :model="ruleForm2"
      status-icon
      :rules="rules"
      ref="ruleForm2"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="联系人姓名" prop="name">
        <el-input type="text" v-model="ruleForm2.name" auto-complete="off" placeholder="请输入用户名/邮箱"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm2.pass" auto-complete="off" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm2.checkPass"
          auto-complete="off"
          placeholder="请再次输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="联系人手机" prop="tel">
        <el-input v-model.number="ruleForm2.tel" placeholder="请输入手机号"></el-input>
      </el-form-item>
<!-- 
      <el-form-item label="验证码" prop="code">
        <div class="code">
          <el-input placeholder="请输入验证码" v-model="ruleForm2.code"></el-input>
          <el-button @click="codeinfor" :disabled="disabling">
            {{ codetexts }}
            <span v-show="showS">s</span>
          </el-button>
        </div>
      </el-form-item> -->

      <el-form-item label="公司名称" prop="companyName">
        <el-input
          type="text"
          v-model="ruleForm2.companyName"
          auto-complete="off"
          placeholder="请输入公司名称"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item label="统一社会信用代码" prop="cCusCBBDepId">
        <el-input
          type="text"
          v-model="ruleForm2.cCusCBBDepId"
          auto-complete="off"
          placeholder="请输入统一社会信用代码"
        ></el-input>
      </el-form-item>

      <el-form-item label="银行账户" prop="caccountnum">
        <el-input
          type="text"
          v-model="ruleForm2.caccountnum"
          auto-complete="off"
          placeholder="请输入银行账户"
        ></el-input>
      </el-form-item>

      <el-form-item label="开户银行" prop="cbranch">
        <el-input
          type="text"
          v-model="ruleForm2.cbranch"
          auto-complete="off"
          placeholder="请输入开户银行"
        ></el-input>
      </el-form-item>

      <el-form-item label="税号" prop="tax_num">
        <el-input
          type="text"
          v-model="ruleForm2.tax_num"
          auto-complete="off"
          placeholder="请输入税号"
        ></el-input>
      </el-form-item>

      <el-form-item label="注册资金" prop="registered_capital">
        <el-input
          type="text"
          v-model="ruleForm2.registered_capital"
          auto-complete="off"
          placeholder="500万"
        ></el-input>
      </el-form-item>

      <el-form-item label="地址" prop="address">
        <el-input
          type="text"
          v-model="ruleForm2.address"
          auto-complete="off"
          placeholder="请输入地址"
        ></el-input>
      </el-form-item>

      <el-form-item label="Email地址" prop="email">
        <el-input
          type="text"
          v-model="ruleForm2.email"
          auto-complete="off"
          placeholder="请输入Email地址"
        ></el-input>
      </el-form-item>-->

      <el-form-item label="公司性质" prop="companyNature">
        <el-select v-model="ruleForm2.companyNature.name" placeholder="请选择公司性质">
          <el-option
            v-for="item in ruleForm2.companyNature"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="所属行业" prop="industry">
        <el-select v-model="ruleForm2.industry.name" placeholder="请选择所属行业">
          <el-option
            v-for="item in ruleForm2.industry"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <!-- const isLt2M = file.size / 1024 / 1024 < 2; -->
      <!-- <el-form-item label="营业执照" prop="businessLicense">
       
        <el-upload
          class="avatar-uploader"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip">无营业执照请上传相关证明（支持：jpg,jpeg,png格式图片），上传图片不得超过2M</div>
        </el-upload>
      </el-form-item> -->

      <el-form-item>
        <el-checkbox v-model="checked1" @change="change">企业用户开票抬头必须和营业执照保持一致</el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="checked2" @change="change">了解并同意《孚地卖场用户服务协议》</el-checkbox>

        <el-button type="text" @click="dialogTableVisible = true">>>协议详情</el-button>
      </el-form-item>

      <el-form-item>
        <el-button
          class="register"
          type="primary"
          style="width:412px;margin-left:70px"
          @click="gotoRegister('ruleForm2')"
          :disabled="!disabled"
          :loading="loading"
        >注册</el-button>
      </el-form-item>
      <p class="jumplogin" @click="jumpLogin">
        已有账户?
        <span>去登录 >></span>
      </p>
      <fu-agreement :dialogTableVisible="dialogTableVisible" @cancel="cancel"></fu-agreement>
    </el-form>
  </div>
</template>
<script>
import FuAgreement from "./FuAgreement";
export default {
  data() {
    let checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value.length < 11) {
            callback(new Error("手机号码位数缺失"));
          } else {
            callback();
          }
        }
      }, 1000);
    };

    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };

    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      imageUrl: "",
      loading: false,
      dialogTableVisible: false, // 弹出框的开关
      disabled: false, // 防止按钮重复提交的状态
      disabling: true, //发送验证码按钮是否能够点击
      showS: 0, // s 时候显示
      btn: "点击按钮进行验证", //
      // codetexts: "发送短信验证码", //
      checked1: 0,
      checked2: 0,
      dialogImageUrl: "",
      dialogVisible: false,
      licensebase64: "", // 营业执照

      ruleForm2: {
        name: "",
        pass: "",
        checkPass: "",
        tel: "",
        // code: "", // 验证码
        companyName: "", // 公司名称
        companyNature: [], //公司性质
        traders: "", //是否贸易商
        // industry: [], //所属行业
        // businessLicense: "" // base64 营业执照

        // cCusCBBDepId:'',  // 统一社会信用代码
        // caccountnum:'', // 银行账户
        // cbranch:'', // 开户银行
        // tax_num:'', // 税号
        // registered_capital:'',//
        // address:'', // 地址
        // email:'', // 邮箱
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入用户名/邮箱",
            trigger: "blur"
          },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur"
          }
        ],
        pass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur"
          }
        ],
        checkPass: [
          {
            required: true,
            message: "请确认密码",
            trigger: "blur"
          },
          {
            validator: validatePass2,
            trigger: "blur"
          }
        ],
        tel: [
          {
            validator: checkAge,
            required: true,
            message: "请输入正确的电话号码",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur"
          },
          {
            min: 6,
            max: 6,
            message: "请输入6位验证码",
            trigger: "blur"
          }
        ],
        companyName: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur"
          },
          {
            min: 2,
            message: "请输入正确的公司名称",
            trigger: "blur"
          }
        ],
        //公司性质
        companyNature: [
          {
            required: true,
            message: "请选择公司性质",
            trigger: "blur"
          }
        ], 
        //公司性质
        // industry: [
        //   {
        //     required: true,
        //     message: "请选择所属行业",
        //     trigger: "blur"
        //   }
        // ],
        // cCusCBBDepId: [
        //   {
        //     required: true,
        //     message: "请输入统一社会信用代码",
        //     trigger: "blur"
        //   },
        //   {
        //     min: 2,
        //     message: "请输入统一社会信用代码",
        //     trigger: "blur"
        //   }
        // ],
        // caccountnum: [
        //   {
        //     required: true,
        //     message: "请输入银行账户",
        //     trigger: "blur"
        //   },
        //   {
        //     min:12,
        //     message: "请输入银行账户",
        //     trigger: "blur"
        //   }
        // ],
        // cbranch: [
        //   {
        //     required: true,
        //     message: "请输入开户银行",
        //     trigger: "blur"
        //   },
        //   {
        //     min: 2,
        //     message: "请输入开户银行",
        //     trigger: "blur"
        //   }
        // ],
        // tax_num:[
        //   {
        //     required: true,
        //     message: "请输入税号",
        //     trigger: "blur"
        //   },
        //   {
        //     min: 2,
        //     message: "请输入税号",
        //     trigger: "blur"
        //   }
        // ],
        // registered_capital:[
        //   {
        //     required: true,
        //     message: "请输入注册资金",
        //     trigger: "blur"
        //   },
        //   {
        //     min: 2,
        //     message: "请输入注册资金",
        //     trigger: "blur"
        //   }
        // ],
        // address: [
        //   {
        //     required: true,
        //     message: "请输入地址",
        //     trigger: "blur"
        //   },
        //   {
        //     min: 2,
        //     message: "请输入地址",
        //     trigger: "blur"
        //   }
        // ],

        // email: [
        //   {
        //     required: true,
        //     message: "请输入邮箱",
        //     trigger: "blur"
        //   },
        //   {
        //     min: 2,
        //     message: "请输入邮箱",
        //     trigger: "blur"
        //   }
        // ],

        // companyNature : [
        //     {
        //         // required: true,
        //         message: '请选择公司性质',
        //         trigger: 'blur'
        //     }
        // ],
        traders: [
          {
            required: true,
            message: "请选择是否贸易商",
            trigger: "blur"
          }
        ],
        // industry: [
        //   {
        //     required: true,
        //     message: "请选择所属行业",
        //     trigger: "blur"
        //   }
        // ],
        businessLicense: [
          {
            // required: true,
            // message: "请上传营业执照",
          }
        ],
        realName: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur"
          },
          {
            min: 3,
            max: 6,
            message: "长度在 3 到 6 个字符",
            trigger: "blur"
          }
        ],
        position: [
          {
            required: true,
            message: "请选择部门职位",
            trigger: "blur"
          }
        ]
      }
    };
  },

  components: {
    FuAgreement
  },

  methods: {
    // 父子组件传值
    cancel(event) {
      this.dialogTableVisible = false;
    },
    // check 事件
    change() {
      if (this.checked1 && this.checked2) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },

    // 数据初始化
    httpInit() {
      this.$http
        .post("/api/index/common/getNature")
        .then(res => {
          let reqdata = res.data;
          if (reqdata.State.Code == 200) {
            this.ruleForm2.companyNature = Array.from(reqdata.data);
          }
        })
        .catch(err => {
          console.log("getNature 出错");
        });

      // this.$http
      //   .post("/api/index/common/getIndustry")
      //   .then(res => {
      //     let reqdata = res.data;
      //     if (reqdata.State.Code == 200) {
      //       this.ruleForm2.industry = Array.from(reqdata.data);
      //     }
      //   })
      //   .catch(err => {
      //     console.log("getIndustry 出错");
      //   });
    },

    // 图片超过限定数量的钩子函数
    // onExceed(files, fileList) {
    //   this.$message({
    //     message: "温馨提示:上传图片最多为一张 请勿重复点击...",
    //     type: "warning"
    //   });
    // },
    // 图片格式转换方法
    // base64() {
    //   let url = document.getElementsByClassName(
    //     "el-upload-list__item-thumbnail"
    //   )[0].src;
    //   // 处理压缩
    //   this.businessLicense = this.imgbase64(url);
    // },

    // async handleAvatarSuccess(res, file) {
    //   let that = this;
    //   this.imageUrl = URL.createObjectURL(file.raw); // 缩略图 展示
    //   // 转 base64
    //   let blob = file.raw; //  blob 对象
    //   let reader = new FileReader();
    //   reader.readAsDataURL(blob);
    //   reader.onloadend = () => {
    //     that.licensebase64 = reader.result;
    //   };
    //   console.log(this.licensebase64);
    // },

    // blobToDataURL(blob, callback) {
    //   let a = new FileReader();
    //   a.onload = function(e) {
    //     callback(e.target.result);
    //   };
    //   a.readAsDataURL(blob);
    // },

    // beforeAvatarUpload(file) {
    //   console.log(file.type);
    //   const isLt2M = file.size / 1024 / 1024 < 2;
    //   let typeValidationArr = ["image/jpeg", "image/png"];
    //   let typeValidation = typeValidationArr.includes(file.type);
    //   console.log(typeValidation);
    //   if (!typeValidation) {
    //     this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return typeValidation && isLt2M;
    // },

    // 转到登录页面
    jumpLogin() {
      const jwt = localStorage.getItem("token");
      if (jwt) {
        this.$notify.info({
          title: "您已登录",
          message: "请勿重复登录3秒后,自动转到首页"
        });
        setTimeout(() => {
          this.$router.push({
            name: "home"
          });
        }, 3000);
      } else {
        this.$router.push({
          name: "login"
        });
      }
    },

    // // 删除上传的图片
    // handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },

    // // 图片预览营业执照
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisible = true;
    // },

    // // 短信验证码
    // codeinfor() {
    //   let phone = parseInt(this.ruleForm2.tel);
    //   console.log(phone);
    //   try {
    //     this.$http({
    //       method: "post",
    //       url: `/api/index/common/sendMsg`,
    //       headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
    //       data: {
    //         phone,
    //         code: `SMS_143540005`
    //       }
    //     })
    //       .then(res => {
    //         let _data = res.data;
    //         console.log(_data);
    //       })
    //       .catch(err => {
    //         console.log("出错了请检查代码");
    //       });
    //   } catch (error) {
    //     console.log("账户注册 短信验证码出现问题...");
    //   }

    //   this.codetexts = 60; // 60秒
    //   this.showS = true; // s 显示出来
    //   this.disabling = true; // 按钮不能够点击
    //   let timer = setInterval(() => {
    //     this.codetexts = this.codetexts - 1;
    //     if (this.codetexts == 0) {
    //       clearInterval(timer);
    //       this.codetexts = "请重新发送短信验证码";
    //       this.showS = false;
    //       this.disabling = false;
    //     }
    //   }, 1000);
    // },

    // 注册接口

    gotoRegister(ruleForm2) {
      this.loading = true;
      this.$refs[ruleForm2].validate(valid => {
        if (valid) {
          // this.base64();
          let param = {
            username: this.ruleForm2.name, // 用户名
            password: this.ruleForm2.pass, // 密码
            name: this.ruleForm2.companyName, // 公司名称
            nature_id: this.ruleForm2.companyNature.name, // 公司性质
            // industry_id: this.ruleForm2.industry.name, // 所属行业
            phone: this.ruleForm2.tel // 手机号
            // license: this.licensebase64 // 营业执照

            // cCusCBBDepId:this.ruleForm2.cCusCBBDepId, // 统一社会信用代码
            // caccountnum:this.ruleForm2.caccountnum,  // 银行账户
            // cbranch: this.ruleForm2.cbranch, // 开户银行
            // tax_num: this.ruleForm2.tax_num, // 税号
            // registered_capital:this.ruleForm2.registered_capital, // 注册资本
            // address: this.ruleForm2.address, // 地址
            // email:this.ruleForm2.email, // 邮箱
          };
            console.log(this.ruleForm2.companyNature.name)
          let smscode = this.ruleForm2.code;
          // param.license = this.licensebase64;
          try {
            this.$http({
              method: "post",
              url: `/api/index/register/register`,
              timeout: 5000,
              // headers: {'X-Requested-With': 'XMLHttpRequest'},    // 必须加这个请求头 否则报错：500
              data: {
                param,
                smscode,
                code: "company"
              }
            })
              .then(res => {
                this.loading = false;
                // console.log(res)
                let _data = res.data;
                if (_data.State.Code == 200) {
                  console.log(_data); // 成功时候的数据
                  this.disabled = false;
                  this.$notify({
                    title: _data.State.Message,
                    type: "success"
                  });
                  this.$router.push({
                    name: "login"
                  });
                } 
                 else {
                  this.$notify.error({
                    title: _data.State.Message,
                    position: "bottom-right"
                  });
                  this.loading = false;
                }
              })
              .catch(err => {
                this.loading = false;
                this.$notify.error({
                  title: "可能由于网路原因 通讯失败...",
                  position: "bottom-right"
                });
              });
          } catch (error) {
            this.loading = false;
            console.log("账户注册接口出现问题...");
          }
        } else {
          this.loading = false;
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  watch: {
    ruleForm2: {
      handler(newName, oldName) {
        // console.log(newName, oldName)
        if (newName.tel) {
          this.disabling = false;
        }
      },
      deep: true
      // immediate: true
    }
  },
  mounted() {
    this.httpInit();
  }
};
</script>
<style lang="scss" scoped>
.qiyeyonghu {
  width: 720px;
  position: relative;
  > i {
    top: 506px;
    left: 72px;
    position: absolute;
    color: #f56c6c;
  }
  .el-form {
    padding-bottom: 60px;
    .el-form-item {
      .code {
        display: flex;
        flex-direction: row;
        .el-input {
          width: 60%;
        }
        .el-button {
          margin-left: 5px;
        }
        .register {
          width: 412px;
        }
      }

      /deep/ .avatar-uploader .el-upload {
        box-sizing: border-box;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      /deep/ .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      /deep/ .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      /deep/ .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    }
    .jumplogin {
      text-align: right;
      padding-right: 138px;
      span {
        color: #ff7200;
        cursor: pointer;
      }
    }
  }
}
</style>
